<template>
  <router-view />
  <div class='flex justify-between mt-5 px-2 py-1 items-center' style="visibility:hidden;width:0;height:0">
            <div class='text-sm'>
                主题色自定义
            </div>
            <div>
                <el-color-picker></el-color-picker>
            </div>
        </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue'
import { store } from './store'
import elColorPicker from './components/ThemePicker.vue'
export default defineComponent({
  name: 'App',
   components:{
        elColorPicker
    },
  setup() {
    //动态样式
    const setting = ref(store.state.layout.setting)
    watch(
      () => setting.value.theme.color,
      async (val) => {
        // document.body.className = 'body-theme-' + store.state.layout.setting.theme.color.replace("#",'')
      },
      { immediate: true }
    )
  }

})
</script>
<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  min-height: 100%;
}


</style>

<style>
.main{
    color: var(--Main);
}

</style>